<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: ZJZ
 * @Date: 2021-07-29 15:47:18
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-12 16:25:59
-->
<template>
  <div class="activity">
    <el-button type="primary" size="default" @click="write">
      + 写更进
    </el-button>
    <div class="ipt" v-if="dialog.activity" @click="write">请输入内容</div>
    <div v-else>
      <el-form :model="activityForm" ref="activityForm" :rules="activityRules">
        <div class="further">
          <div class="sel">
            <div class="one">
              <el-form-item prop="type">
                <el-select
                  v-model="activityForm.type"
                  placeholder="请选择更进方式"
                  clearable
                  filterable
                >
                  <el-option
                    v-for="(item, index) in options"
                    :key="index"
                    :label="item.step"
                    :value="item.id"
                  >
                  </el-option>
                </el-select>
              </el-form-item>
              <el-form-item prop="contactTime">
                <el-date-picker
                  v-model="activityForm.contactTime"
                  type="datetime"
                  placeholder="选择日期时间"
                  value-format="yyyy-MM-dd HH:mm:ss"
                  style="margin-left: 10px"
                >
                </el-date-picker>
              </el-form-item>
            </div>
            <div class="two" @click="colseIpt">关闭</div>
          </div>
          <div class="ta">
            <el-form-item prop="content">
              <el-input
                v-model="activityForm.content"
                :rows="3"
                placeholder="请输入内容"
                type="textarea"
              ></el-input>
            </el-form-item>
          </div>
          <div class="img">
            <el-form-item>
              <el-upload
                ref="uploadImg"
                action="#"
                list-type="picture-card"
                :auto-upload="false"
                accept="image/jpeg,image/png"
                :on-change="getFile"
                :file-list="fileList"
                :on-remove="handleRemove"
                class="upImg"
                prop="img"
              >
                <i slot="trigger" class="el-icon-plus"></i>
              </el-upload>
            </el-form-item>
          </div>
          <div @click="clearImgs" class="delAll" v-if="fileList.length !== 0">
            全部删除
          </div>
          <div class="files">
            <el-form-item>
              <el-upload
                class="upload-demo"
                ref="uploadFile"
                action="#"
                accept=".xlsx,.xls,.doc,.docx,.pdf"
                :file-list="fileList1"
                :http-request="httpRequest"
                :on-change="getFile1"
                :on-remove="handleRemove1"
                style="margin-top: 10px"
              >
                <el-button class="taskBtn" round> 上传文件 </el-button>
              </el-upload>
            </el-form-item>
            <div
              @click="clearFiles"
              class="delAll"
              v-if="fileList1.length !== 0"
            >
              全部删除
            </div>
          </div>
          <div class="an">
            <div class="tp" v-if="editId == ''">
              <el-button
                type="primary"
                size="default"
                @click="upImg"
                v-hasPermi="['serviceProvide:clue:addFollowup']"
              >
                保存
              </el-button>
            </div>
            <div class="fj" v-else>
              <el-button type="primary" size="default" @click="updata">
                更新
              </el-button>
            </div>
          </div>
        </div>
      </el-form>
    </div>
    <div class="operation" v-for="(item, index) in furtherData" :key="index">
      <div class="operation-content">
        <div class="user">
          <div class="portrait">
            <img :src="item.avatar" alt="" />
          </div>
          <div class="name">{{ item.createBy }}</div>
        </div>
        <div class="record">
          <div class="time">
            {{ item.createTime }}
            <span
              style="
                font-size: 12px;
                font-family: PingFangSC-Regular, PingFang SC;
                font-weight: 400;
                color: #666666;
                background-color: #eeeeee;
                padding: 0 3px 0 3px;
                margin-left: 5px;
              "
              >{{ item.typeName }}</span
            >
          </div>
          <div class="content">
            <div style="margin-top: 5px">{{ item.content }}</div>
            <div class="lx">下次联系时间：{{ item.contactTime }}</div>
          </div>
        </div>
      </div>
      <div class="edit" style="margin-top: 20px">
        <span class="jl">线索更新记录</span>
        <el-dropdown style="margin-left: 10px">
          <el-button class="el-icon-more" style="border: none"></el-button>
          <el-dropdown-menu slot="dropdown">
            <el-dropdown-item
              @click.native="edit(index)"
              v-hasPermi="['serviceProvide:clue:updateFollowup']"
            >
              编辑
            </el-dropdown-item>
            <el-dropdown-item
              @click.native="del(index)"
              v-hasPermi="['serviceProvide:clue:delActivity']"
            >
              删除
            </el-dropdown-item>
          </el-dropdown-menu>
        </el-dropdown>
      </div>
    </div>
  </div>
</template>

<script>
import {
  addFollowup,
  getActivityInfo,
  delActivity,
  updateFollowup,
  furtherList,
} from "@/api/CRM";
import Vue from "Vue";
import { getDicts } from "@/api/system/dict/data";
Vue.prototype.getDicts = getDicts;
export default {
  props: {
    drawerData: {
      type: Object,
      required: true,
    },
    furtherData: {
      type: Array,
      required: true,
    },
    dialog: {
      type: Object,
      required: true,
    },
    getfurther: {
      type: Function,
      required: true,
    },
    activityForm: {
      type: Object,
      required: true,
    },
    getEnclosure: {
      type: Function,
      required: true,
    },
  },
  data() {
    return {
      activityRules: {
        type: [
          {
            required: true,
            message: "请选择更进方式",
          },
        ],
        contactTime: [
          {
            required: true,
            message: "请选择联系时间",
            trigger: "change",
          },
        ],
        content: [
          {
            required: true,
            message: "请填写跟进内容",
            trigger: "blur",
          },
        ],
        img: [
          {
            required: true,
            message: "请添加跟进图片",
            tiggele: "change",
          },
        ],
      },
      closer: false,
      fileList: [],
      fileList1: [],
      file: [],
      dialogImageUrl: "",
      dialogVisible: false,
      options: [],
      editId: "",
      fileImg: [],
      fileWj: [],
    };
  },
  created() {
    this.furtherList();
  },
  methods: {
    // 获取更进方式
    furtherList() {
      furtherList().then((res) => {
        this.options = res.data;
      });
    },
    // 删除全部上传图片
    clearImgs() {
      this.$refs.uploadImg.clearFiles();
      this.fileList = [];
    },
    // 删除全部上传文件
    clearFiles() {
      this.$refs.uploadFile.clearFiles();
      this.fileList1 = [];
    },
    // 关闭更紧框
    colseIpt() {
      this.editId = "";
      this.dialog.activity = true;
      this.activityForm.type = "";
      this.activityForm.contactTime = "";
      this.activityForm.content = "";
      this.fileList = [];
      this.fileList1 = [];
    },
    updata() {
      let fd = new FormData();
      this.fileList.forEach((item) => {
        fd.append("images", item.raw);
      });
      fd.append("crmFollowup", JSON.stringify(this.activityForm));
      this.file.forEach((item) => {
        fd.append("files", item.raw);
      });
      fd.append("imageIds", JSON.stringify(this.fileImg));
      fd.append("fileIds", JSON.stringify(this.fileWj));
      fd.append("followId", this.editId);
      updateFollowup(fd).then((res) => {
        this.$message.success(res.msg);
        this.getEnclosure();
        this.getfurther();
        this.dialog.activity = true;
        (this.fileImg = []), (this.fileWj = []);
        this.colseIpt();
      });
    },
    close() {
      this.$emit("onClose", this.activityForm);
    },
    write() {
      this.dialog.activity = false;
    },
    async del(i) {
      const confirmResult = await this.$confirm(
        "此操作将永久删除该跟进, 是否继续?",
        "提示",
        {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }
      ).catch((err) => err);
      /*如果用户确认打印confirm,如果用户取消显示cancel*/
      if (confirmResult !== "confirm") {
        return this.$message.info("已取消删除!");
      } else {
        delActivity({ followupId: this.furtherData[i].id }).then((res) => {
          this.$message.success("删除成功！");
          this.getfurther();
        });
      }
    },
    edit(i) {
      this.editId = this.furtherData[i].id;
      getActivityInfo({
        followupId: this.furtherData[i].id,
      }).then((res) => {
        console.log(res);
        this.dialog.activity = false;
        this.activityForm.type = res.data.type;
        this.activityForm.content = res.data.content;
        this.activityForm.contactTime = res.data.contactTime;
        if (res.data.imageUrls) {
          let arr = [];
          this.fileList = res.data.imageUrls;
          res.data.imageUrls.forEach((item) => {
            arr.push(item.name);
          });
          this.fileImg = arr;
        }
        if (res.data.enclosureUrls) {
          let arr = [];
          this.fileList1 = res.data.enclosureUrls;
          res.data.enclosureUrls.forEach((item) => {
            arr.push(item.name);
          });
          this.fileWj = arr;
        }
      });
    },
    getFile1(file, fileList) {
      this.file = fileList;
      this.fileList1 = fileList;
      let arr = [];
      fileList.forEach((item) => {
        if (item.status === "success") {
          arr.push(item.name);
        }
      });
      this.fileWj = arr;
    },
    httpRequest(data) {},
    upImg() {
      this.$refs.activityForm.validate((valid) => {
        if (!valid) return this.$message.info("请填写必填项");
        let fd = new FormData();
        this.fileList.forEach((item) => {
          fd.append("images", item.raw);
        });
        fd.append("crmFollowup", JSON.stringify(this.activityForm));
        this.file.forEach((item) => {
          fd.append("files", item.raw);
        });
        addFollowup(fd).then((res) => {
          this.$message.success(res.msg);
          this.getEnclosure();
          this.getfurther();
          this.colseIpt();
          this.dialog.activity = true;
        });
      });
    },
    // 获取图片文件
    getFile(file, fileList) {
      this.fileList = fileList;
      console.log(fileList);
      let arr = [];
      fileList.forEach((item) => {
        if (item.status === "success") {
          arr.push(item.name);
        }
      });
      this.fileImg = arr;
    },
    handleRemove(file, fileList) {
      let arr = [];
      fileList.forEach((item) => {
        if (item.status === "success") {
          arr.push(item.name);
        }
      });
      this.fileImg = arr;
    },
    handleRemove1(file, fileList) {
      let arr = [];
      fileList.forEach((item) => {
        if (item.status === "success") {
          arr.push(item.name);
        }
      });
      this.fileWj = arr;
    },
  },
};
</script>

<style lang="less" scoped>
.activity {
  height: 62vh;
}
.ipt {
  margin-top: 18px;
  width: 100%;
  height: 40px;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #d3dbeb;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #c4c5c6;
  line-height: 40px;
  padding-left: 10px;
}
.operation {
  display: flex;
  justify-content: space-between;
  .operation-content {
    margin-top: 20px;
    display: flex;
    .user {
      display: flex;
      width: 150px;
      .portrait {
        width: 30px;
        height: 30px;
        border-radius: 30px;
        img {
          width: 100%;
          height: 100%;
          border-radius: 30px;
        }
      }
      .name {
        height: 30px;
        line-height: 30px;
        margin-left: 14px;
      }
    }
    .record {
      padding-left: 21px;
      margin-left: 44px;
      border-left: 1px dotted #dbdcdb;
      .time {
        font-size: 14px;
        position: relative;
        font-family: PingFangSC-Regular, PingFang SC;
        font-weight: 400;
        color: #999999;
        line-height: 16px;
      }
      .time::before {
        content: "";
        position: absolute;
        left: -27px;
        width: 11px;
        height: 11px;
        background-color: #000;
        transform: rotate(45deg);
      }
    }
  }
}
.further {
  margin-top: 18px;
  width: 100%;
  background: #ffffff;
  border-radius: 4px;
  border: 1px solid #d3dbeb;
  padding: 14px;
}
.ta {
  margin-top: 10px;
  /deep/.el-textarea__inner {
    border: none;
    resize: none;
  }
}
.an {
  margin-top: 10px;
  display: flex;
  justify-content: flex-end;
  span {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #666666;
  }
  .fj {
    margin-left: 23px;
  }
}
.img {
  width: 100%;
}
.imgUP {
  display: block !important;
}
.jl {
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2b2b2b;
}
.sel {
  display: flex;
  justify-content: space-between;
  .one {
    display: flex;
  }
  .two {
    margin-top: 5px;
  }
}
.lx {
  margin-top: 5px;
  font-size: 12px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #2b2b2b;
  line-height: 12px;
}
.delAll {
  margin-top: 10px;
  font-size: 14px;
  font-family: PingFangSC-Regular, PingFang SC;
  font-weight: 400;
  color: #1267fa;
}
.files {
  margin-top: 10px;
  padding-bottom: 10px;
  width: 100%;
  border: 1px dashed #c4c5c6;
}
</style>